<template>
  <div class="">
    <el-form label-width="80px">
      <el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="标签名称">
              <el-input v-model="companysData.tags" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select v-model="companysData.city" placeholder="请选择" @change="cityChange">
                <el-option v-for="(item, index) in city" :key="index" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地区">
              <el-select v-model="companysData.province" placeholder="请选择" @change="cityChange">
                <el-option v-for="(item, index) in province" :key="index" :label="item" :value="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="companysData.shortName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="companysData.state" placeholder="请选择" style="width:100%">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button @click="onclear">清除</el-button>
            <el-button type="primary" @click="onsearch">搜索</el-button>
          </el-col>
          <el-row type="flex" justify="end">
            <el-col :span="2">
              <el-button class="add_new_users" type="success" icon="el-icon-edit" @click="$emit('update:showaddcompany', true)">新增用户</el-button>
            </el-col>
          </el-row>
        </el-row>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getCompanysList } from '@/api/companys';
import { provinces, citys } from '@/assets/citys';

export default {
  name: '',
  components: {},
  props: {
    showaddcompany: {
      type: Boolean,
      default: false
    },
    companysData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      city: '',
      province: '',
      cityValue: '',
      provinceValue: ''
    };
  },
  computed: {},
  watch: {},
  created() {
    this.city = provinces();
  },
  mounted() {},
  methods: {
    // 搜索
    async onsearch() {
      const { data } = await getCompanysList({
        ...this.companysData,
        isFamous: this.companysData === 1,
        city: this.cityValue ? this.cityValue : this.companysData.city,
        province: this.provinceValue ? this.provinceValue : this.companysData.province
      });
      this.$emit('onsearch', data.items);
    },
    // // 清除
    onclear() {
      this.companysData = { tags: '', city: '', province: '', shortName: '', isFamous: '' };
      this.$emit('onclear');
    },
    // 城市选择
    cityChange(v) {
      this.province = citys(v);
      this.cityValue = v;
    },
    provincechange(v) {
      this.provinceValue = v;
    }
  }
};
</script>
<style lang="scss" scoped>
.add_new_users {
  position: absolute;
  right: 8px;
}
</style>
